<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@cancel="handleCancel"
		@ok="handleOk"
		:destroyOnClose="true"
		:maskClosable="false"
	>
		<a-spin :spinning="confirmLoading">
			<a-form v-if="step == 1" :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<a-form-item label="券码">
					<a-input
						placeholder="券码"
						v-decorator="[
							'cardVouchNo',
							{
								rules: [{ required: true, whitespace: true, message: '券码' }],
								getValueFromEvent: removeSpaces
							}
						]"
					/>
				</a-form-item>
			</a-form>
			<a-descriptions :column="2" v-else-if="cardInfo">
				<a-descriptions-item label="卡券名称">{{ cardInfo.cardName }}</a-descriptions-item>
				<a-descriptions-item label="卡券状态">
					<a-tag :color="cardInfo.status == 1 ? '#247cf0' : '#f50'">{{ cardInfo.status == 1 ? '启用' : '作废' }}</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="所属活动">{{ cardInfo.activityName }}</a-descriptions-item>
				<a-descriptions-item label="发行数量">{{ cardInfo.publishCount }}</a-descriptions-item>
				<a-descriptions-item label="剩余数量">{{ cardInfo.lastCount }}</a-descriptions-item>
				<a-descriptions-item label="有效天数">{{ cardInfo.activeDay }}</a-descriptions-item>
				<a-descriptions-item label="卡券封面" span="2"><img class="imgbox" :src="filebaseUrl + cardInfo.picUrl" /></a-descriptions-item>
				<a-descriptions-item label="卡券备注" span="2">{{ cardInfo.remark }}</a-descriptions-item>
				<a-descriptions-item label="用户昵称">{{ cardInfo.customerNick }}</a-descriptions-item>
				<a-descriptions-item label="手机号码">{{ cardInfo.customerMobileNo }}</a-descriptions-item>
				<a-descriptions-item label="生产/预产日期">{{ cardInfo.birthDate }}</a-descriptions-item>
				<a-descriptions-item label="宝宝/孕妇名称">{{ cardInfo.birthName }}</a-descriptions-item>
			</a-descriptions>
		</a-spin>
	</a-modal>
</template>

<script>
import { api } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
export default {
	name: 'verificationModal',
	mixins: [ModalMixins],
	data() {
		return {
			cardInfo: undefined,
			step: 1,
			cardVouchNo: ''
		};
	},
	created() {},
	methods: {
		show() {
			this.title = '卡券核销';
			this.step = 1;
			this.visible = true;
		},

		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleCancel() {
			this.close();
		},
		handleOk() {
			//如果是step 判断是否有卡券
			if (this.step == 1) {
				this.form.validateFields((err, values) => {
					// 验证表单没错误
					if (!err) {
						this.confirmLoading = true;
						this.cardVouchNo = values.cardVouchNo;
						this.getCardDetail();
					}
				});
			} else {
				this.confirmLoading = true;
				this.$postAction(api.verification, {
					cardVouchNo: this.cardVouchNo
				})
					.then(res => {
						if (res.result) {
							this.$message.success('核销成功');
							this.$emit('ok');
							this.visible = false;
						}
					})
					.finally(() => {
						this.confirmLoading = false;
					});
			}
		},
		getCardDetail() {
			this.confirmLoading = true;
			this.$postAction(api.verificationQuery, {
				cardVouchNo: this.cardVouchNo
			})
				.then(res => {
					this.cardInfo = { ...res.data };
					if (this.cardInfo.cardName) {
						this.step = 2;
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		}
	}
};
</script>

<style scoped lang="less">
.imgbox {
	display: block;
	width: 200px;
}
/deep/ .ant-descriptions-item > span {
	vertical-align: top;
}
</style>
